<template>
	<view class="papaDetail">
		<u-navbar title="泡泡详情" title-size="36" title-color="#333333" back-icon-size="40"></u-navbar>

		<view class="block-detail">
			<view class="dtail-header">
				<image v-if="papaDetail.avatar" :src="papaDetail.avatar" class="detail-img" mode=""></image>
				<view class="header-info" v-if="papaDetail.nickname">
					<view class="user-info">
						<view class="user_level">
							<text>{{ papaDetail.nickname || '' }}</text>
							<text class="level">{{ papaDetail.userLevelDesc }}</text>
						</view>
						<view class="header-fire">
							<image src="../../static/header/icon_fire_active.png" mode=""></image>
							<text>{{ papaDetail.vitalityValue }}</text>
						</view>
					</view>
					<view class="user-time">{{$u.timeFrom(papaDetail.createTime, 'yyyy年mm月dd日')}}</view>
				</view>
				
			</view>
			<view class="detail-content">
				{{ papaDetail.bubbleContent || '' }}
			</view>
			<view class="detail-imgList">
				<view class="imgList" v-if="papaDetail.bubbleImgUrlList.length > 0">
					<image v-for="(item, index) in papaDetail.bubbleImgUrlList" @click="onShowImg(index)" :key="index"
						:src="item" class="imgItem" mode=""></image>
				</view>
				<!-- <text class="imgNum">共9张图</text> -->
			</view>
			<view class="swiper-tag" v-if="papaDetail.spaceName">
				<u-tag shape="circle" :text="papaDetail.spaceName" bg-color="#FFFAD3" border-color="#FFFAD3" color="#FF7B02" />
			</view>
			<view class="swiper-bottom">
				<view class="swiper-option">
					<u-icon :name="iconLook" :size="32"></u-icon>
					<view class="grid-text">{{ papaDetail.browseCount }}</view>
				</view>
				<view class="swiper-option">
					<u-icon :name="iconShare" :size="32"></u-icon>
					<view class="grid-text">{{ papaDetail.shareCount }}</view>
				</view>
				<view class="swiper-option">
					<u-icon :name="iconMessage" :size="32"></u-icon>
					<view class="grid-text">{{ papaDetail.commentCount }}</view>
				</view>
				<view class="swiper-option">
					<u-icon :name="iconSupport" :size="32"></u-icon>
					<view class="grid-text">{{ papaDetail.likeCount }}</view>
				</view>
			</view>
		</view>
		<!-- <view style="margin: 78rpx 0 180rpx;">
			<empty :showButton="false"></empty>
		</view> -->
		<view class="commont_repay" v-if="dataShow">
			<view class="dtail-header commont_header" v-for="(comment, c) in commentList" :key="c">
				<image v-if="comment.avatar" :src="comment.avatar" class="detail-img" mode=""></image>
				<view class="header-info" style="padding-top: 16rpx;">
					<view class="user-info">
						<view class="user_level">
							<text>{{ comment.nickname || '' }}</text>
							<text class="level">{{ comment.userLevelDesc }}</text>
						</view>
						<view class="header-fire">
							<!-- <image src="../../static/header/icon_fire_active.png" mode=""></image> -->
							<!-- <text>66.6w</text> -->
						</view>
					</view>
					<view class="repay_content">
						{{ comment.commentContent || '' }}
					</view>
					<view class="replay_content" v-if="comment.parentCommentId">
						回复<text>@{{ comment.parentNickname}}</text>{{ comment.parentCommentContent }}
					</view>
					<view class="repay_time">
						<text>{{$u.timeFrom(comment.commentTime, 'yyyy年mm月dd日')}}</text>
						<image src="../../static/header/icon_message_c.png" @click="onRepay(comment)" class="repay_mesage" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="commont_repay" v-else>
			<empty type="comment" :showButton="false"></empty>
		</view>
		<view class="coin-btn">
			<u-field @click="onComment" label-width="0" disabled placeholder="说到真到位，一起来吐泡泡~" class="commont_input" :clearable="false"></u-field>
			<button type="default" class="recharge_coin" @click="onShare" open-type="share">分享好友</button>
		</view>
		
		<u-popup v-model="showReplay" mode="center" closeable width="640rpx" border-radius="16" close-icon-size="40">
			<replay-model v-if="showReplay" :bubbleId="id" @resetPapaComment="resetPapaComment" :commentDetail="commentDetail" @close="showReplay = false"></replay-model>
		</u-popup>
	</view>
</template>

<script>
	import empty from '../../components/empty.vue'
	import replayModel from './modal/replay.vue'
	export default {
		components: {
			empty,
			replayModel
		},
		data() {
			return {
				iconLook: require('../../static/header/icon_eye.png'),
				iconShare: require('../../static/header/icon_share.png'),
				iconMessage: require('../../static/header/icon_message.png'),
				iconSupport: require('../../static/header/icon_support.png'),
				showReplay: false,
				id: null,
				papaDetail: {},
				dataShow: true,
				pageInfo: {
					bubbleId: null,
					currentPage: 1,
					totalPage: 0,
				},
				commentList: [],
				commentDetail: {}, // 评论详情
			};
		},
		onLoad(options) {
			this.id = options.id
			this.pageInfo.bubbleId = options.id
			this.__init()
			// this.getPapaComment()
		},
		async onShow() {
			this.pageInfo.currentPage = 1
			this.commentList = []
			await this.getPapaComment()
		},
		onReachBottom() {
			let pageInfo = this.pageInfo
			if(pageInfo.currentPage < pageInfo.totalPage) {
				pageInfo.currentPage = pageInfo.currentPage + 1
				this.getPapaComment()
			}
		},
		methods: {
			__init() {
				uni.showLoading()
				this.$u.get('/paopao/mini/space/queryPaoPaoDetail', { id: this.id }).then(res => {
					uni.hideLoading()
					this.papaDetail = res
				})
				
				this.$u.post('/paopao/mini/space/browsePaoPao', { bubbleId: this.id })
			},
			onComment() {
				// NRHRxUYqatLvxf8fUeBaxVZf20XlsinoMROD4FSGXEs
				let _id = ['NRHRxUYqatLvxf8fUeBaxVZf20XlsinoMROD4FSGXEs']
				
				uni.requestSubscribeMessage({
				    tmplIds: _id,
				    success: (res) => {
				        let templateId = _id.filter(i => res[i] === 'accept');
				        if( templateId.length ) {
							this.showReplay = true
							this.commentDetail = {}
				        }
				    },
				    fail: (err) => {
				        console.log(err,'requestSubscribeMessage err')
				        if (err.errCode === 20004) {
				            // 20004:用户关闭了主开关，无法进行订阅,引导开启
				        }
				    }
				})
			},
			onRepay(item) {
				// NRHRxUYqatLvxf8fUeBaxVZf20XlsinoMROD4FSGXEs
				let _id = ['NRHRxUYqatLvxf8fUeBaxVZf20XlsinoMROD4FSGXEs']
				
				uni.requestSubscribeMessage({
				    tmplIds: _id,
				    success: (res) => {
				        let templateId = _id.filter(i => res[i] === 'accept');
				        if( templateId.length ) {
							this.showReplay = true
							this.commentDetail = item
				        }
				    },
				    fail: (err) => {
				        console.log(err,'requestSubscribeMessage err')
				        if (err.errCode === 20004) {
				            // 20004:用户关闭了主开关，无法进行订阅,引导开启
				        }
				    }
				})
			},
			resetPapaComment() {
				this.pageInfo.currentPage = 1
				this.commentList = []
				this.getPapaComment()
			},
			onShowImg(index) {
				console.log(index)
				const papaImg = this.papaDetail.bubbleImgUrlList || []
				uni.previewImage({
					current: index,
					urls: papaImg,
					loop: true
				})
			},
			getPapaComment() {
				uni.showLoading()
				this.$u.get('/paopao/mini/space/queryPaoPaoCommentList', this.pageInfo).then(res => {
					uni.hideLoading()
					if(res && res.status == -1) { return }
					let items = res.items || []
					items.forEach(item => {
						item.commentTime = +new Date(item.commentTime)
					})
					this.commentList.push(...items)
					// console.log(this.commentList)
					this.pageInfo.totalPage = res.totalPage
					if(this.commentList.length > 0) {
						this.dataShow = true
					} else {
						this.dataShow = false
					}
				})
			},
			onShare() {
				// 分享好友
				uni.share({
					provider: "weixin",  
					scene: 'WXSceneSession',    // WXSceneSession/WXSenceTimeline/WXSceneFavorite  
					imageUrl: 'https://www.hesongzhineng.com/img/javafile/20210821103944-dc3a824a-bb88-4781-834d-83d7911129c3.png',  
					type: 5,
					title: '好友邀请你来一起玩',
					// summary: spaceDetail.spaceBriefIntroduction,
					miniProgram: {
						id: 'wx2959a675e140ffec',
						path: '/pages/tabbar/home?businessParamType=51',
						type: '1'
					},
					success: (res) => {  
						console.log("weixin == success:" + JSON.stringify(res));  
					},  
					fail: (err) => {  
						console.log("weixin == fail:" + JSON.stringify(err));  
					}  
				})
			}
		}
	}
</script>

<style lang="less" scoped>
@import url("../../common/css/var.less");
.dtail-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: @tText;
	.detail-img {
		width: 96rpx;
		height: 96rpx;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 24rpx;
	}
}
.commont_header {
	align-items: flex-start;
	padding-bottom: 50rpx;
}
.header-info {
	display: flex;
	align-items: flex-start;
	flex-basis: 82%;
	flex-direction: column;
	.user-time {
		padding-top: 8rpx;
		font-size: 24rpx;
		color: @tText;
	}
	.user-info {
		display: flex;
		align-items: flex-start;
		flex-direction: row;
		justify-content: space-between;
		width: 100%;
		font-size: 32rpx;
		color: @mText;
		
		.user_level {
			display: flex;
			align-items: center;
		}
		.level {
			margin-left: 16rpx;
			padding: 0 12rpx;
			height: 32rpx;
			line-height: 32rpx;
			background: #C165DD;
			border-radius: 16rpx;
			font-size: 24rpx;
			color: #FFFFFF;
		}
	}
	
	.repay_content {
		padding-top: 22rpx;
		font-size: 28rpx;
		line-height: 44rpx;
		color: @mText;
	}
	.replay_content {
		color: @mText;
		font-size: 28rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		width: 100%;
		padding: 12rpx;
		display: block;
		margin-top: 24rpx;
		border-radius: 8rpx;
		background-color: #F7F7F7;
		text {
			padding: 0 16rpx;
		}
	}
	.repay_time {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 28rpx;
		font-size: 24rpx;
		width: 100%;
		color: @tText;
		.repay_mesage {
			width: 32rpx;
			height: 32rpx;
		}
	}
}
.header-fire {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-basis: 25%;
	font-size: 28rpx;
	line-height: 32rpx;
	image {
		width: 32rpx;
		height: 32rpx;
		margin-right: 8rpx;
	}
}
.block-detail {
	width: 100%;
	background: #FFFFFF;
	padding: 32rpx 32rpx 0;

	.detail-content {
		padding-top: 32rpx;
		color: @mText;
		font-size: 32rpx;
	}
	.swiper-tag {
		padding-top: 20rpx;
		u-tag {
			font-size: 24rpx;
			margin-right: 16rpx;
		}
	}
	.swiper-bottom {
		padding: 0 32rpx;
		display: flex;
		align-items: center;
		border-bottom: 2rpx solid #E6E6E6;
		justify-content: space-between;
	}
	.swiper-option {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 24rpx 0 20rpx;
		color: @tText;
		font-size: 28rpx;
		u-icon {
			width: 32rpx;
			height: 32rpx;
			margin-right: 8rpx;
		}
	}
	.detail-imgList {
		position: relative;
		padding-top: 32rpx;
		.imgList {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
		}
		.imgItem {
			width: 192rpx;
			height: 192rpx;
			background: #FFFFFF;
			opacity: 1;
			border-radius: 20rpx;
			margin-right: 24rpx;
			margin-bottom: 24rpx;
			&:nth-child(3n) {
				margin-right: 0;
			}
		}
	}
}
.commont_repay {
	margin: 32rpx 32rpx 180rpx;
}
.coin-btn {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 24rpx 32rpx;
	border-top: 2rpx solid #E6E6E6;
	background-color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.commont_input {
		width: 462rpx;
		line-height: 96rpx;
		background: #F7F7F7;
		border-radius: 48rpx;
		/deep/.u-field {
			padding: 0 28rpx;
		}
		/deep/.u-field__input-wrap {
			height: 96rpx;
			line-height: 96rpx;
		}
		/deep/.fild-body {
			display: block;
		}
	}
	.recharge_coin {
		width: 192rpx;
		line-height: 96rpx;
		background: @mColor !important;
		border-radius: 48rpx;
		font-size: 32rpx;
		color: @mText;
	}
}
</style>
